<#import "/layout.html" as c>
    <@c.html title="Index">
    <!-- ================== 开始基础CSS样式引入 ================== -->
    <link type="text/css" href="${publicRoot}plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
    <link type="text/css" href="${pluginsRoot}bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="${pluginsRoot}font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link type="text/css" href="${pluginsRoot}ztree/css/metroStyle/metroStyle.css" rel="stylesheet">
    <link type="text/css" href="${cssRoot}animate.min.css" rel="stylesheet"/>
    <link type="text/css" href="${cssRoot}style.min.css" rel="stylesheet"/>
    <link type="text/css" href="${cssRoot}style-responsive.min.css" rel="stylesheet"/>
    <link type="text/css" href="${cssRoot}theme/default.css" rel="stylesheet" id="theme"/>
    <link type="text/css" href="${cssRoot}style-plugins.css" rel="stylesheet"/>
    <!-- ================== 结束基础CSS样式引入 ================== -->

    <!-- ================== 开始页面所需CSS样式引入 ================== -->
    <link href="${pluginsRoot}gritter/css/jquery.gritter.css" rel="stylesheet"/>
    <!-- 表单验证 -->
    <link href="${pluginsRoot}parsley/parsley.min.css" rel="stylesheet"/>
    <!-- ================== 结束页面所需CSS样式引入 ================== -->
    <!--[if lt IE 9]>

    <![endif]-->
    <!-- ================== 开始基础JavaScript调用 ================== -->

    <!-- ================== 结束基础JavaScript调用 ================== -->

    <style type="text/css">
        .item-hover{
            background:#1a2229;
            color: #fff;
        }
        .table-title{
            background: #ffffff;
            text-align: center;
        }
        .mytable {
            color: #666;
            width: 96%;
            margin: 10px;
            background: #ffffff;
        }
        table tr{
            padding: 5px 0;
        }
        .tl{
            text-align: left;
        }
        .ta{
            text-align: center;
        }
        .mytable input {
            width: 220px;
            padding: 3px 6px;
            height: auto;
            border-radius: 5px;
            outline: none;
            border: 0;
            -webkit-appearance: none;
        }

        .mytable .lable {
            width: 100px;
            /*background: #eee;*/
        }

        .btn {
            padding-top: 1px;
            padding-bottom: 1px;
        }

        .base-info{
            max-width: 220px;
            width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;
        }

        .mytable button {
            float: right;
        }

        tbody {
            padding: 1px;
        }

        select {
            min-width: 120px;
            padding: 3px 8px;
            color: #666;
            border-radius: 5px;
            outline: none;
        }
        .mytable .w25{
            width: 25%;
        }
        .mytable  .w30{
            width: 30%;
        }
        .mytable .w45{
            width: 45%;
        }
    </style>

    <!-- 开始页面内容 -->
    <div id="content" class="content">

        <!-- 开始面包屑导航 -->
        <ol class="breadcrumb pull-right">
            <li><a href="javascript:;">首页</a></li>
            <#list menuState.breadCrumbList as breadCrumb>
                <li class="">${breadCrumb}</li>
            </#list>
        </ol>
        <!-- 结束面包屑导航 -->

        <!-- 开始页头区域 -->
        <h1 class="page-header">风控配置
            <small class="m-l-10">风控参数配置</small>
        </h1>
        <!-- 结束页头区域 -->

        <@shiro.hasPermission name="sys:risk:edit">
        <input type="hidden" id="riskEdit" value="1"/>
        </@shiro.hasPermission>
        <@shiro.hasPermission name="sys:risk:desc:edit">
        <input type="hidden" id="riskDescEdit" value="1"/>
        </@shiro.hasPermission>

        <!-- 品种列表 begin row -->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-inverse" data-no-drag="true">
                    <div class="panel-body">
                        <div style="position: relative;">
                            <table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;" class="mytable dt-grid table table-bordered  table-responsive" >
                                <tbody>
                                    <tr class="table-title dt-grid-headers " >
                                        <#list commoList as item >
                                            <th class="lable ta" onclick="tabCommo(${item.id})" class="commo" data-no="${item.id}">${item.name}(${item.code})</th>
                                        </#list>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->

        <!--  品种参数列表begin row -->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-inverse" data-no-drag="true">
                    <div class="panel-body">
                        <div style="position: relative;" id="riskContiner">
                            <table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;" class="mytable">
                                <tbody>
                                <tr>
                                    <td class="lable">参数名</td>
                                    <td class="lable">值</td>
                                    <td class="lable">备注</td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->

    </div>
</@c.html>

<!-- ================== 开始页面级JavaScrip调用 ================== -->
<script src="${pluginsRoot}bootstrap-wizard/js/bwizard.js"></script>
<!-- 表单checkbox项 -->
<script src="${pluginsRoot}bootstrap-switch/bootstrap-switch.min.js"></script>
<!-- 日历控件 -->
<script src="${pluginsRoot}/jquery.dtGrid/dependents/datePicker/WdatePicker.js" defer="defer"></script>
<script src="${jsRoot}risk/risk.handle.js"></script>
<script>
    $(function () {
       $('.table-title th:first').addClass('item-hover');
       $('.table-title th').on('click',function () {
           $(this).addClass('item-hover').siblings().removeClass('item-hover');
       });

        $('.dropdown-menu  li').on('click', function() {
            var title = $(this).text();
            $(this).parents('td').find('.dropdown-toggle').html(title + '<span class="caret"></span>');
        });


    });
</script>